<template>
    <div>
        <h1>待办事项</h1>
        <!-- 条件渲染：如果没有事项，则显示暂无待办事项 -->
         <p v-if="todos.length === 0">暂无待办事项</p>
         <!-- 如果有，列表渲染：待办事项 -->
          <ul v-else>
            <li v-for="(todo, index) in todos" :key="index">
                <!-- v-bind 绑定样式 -->
                 <span v-bind:style="{ color: todo.completed ? green : red}"
                 @click="toggleComplete(index)">
                    {{ todo.text }}
                </span>
                <button @click="removeTode(index)">删除</button>
            </li>
          </ul>
          <!-- 双向数据绑定：通过v-model 绑定输入框 -->
           <input v-model="newTodo" :placeholder="inputPlaceholder"/>
           <button @click="addTodo">添加</button>

           <!-- 内容渲染：显示待办事项数量 -->
            <p>当前待办事项数量: {{ todos.length }}</p>
    </div>
</template>

<script setup>
import {ref} from 'vue'

//待办事项列表
const todos = ref([]);

//输入框双向数据绑定
const newTodo = ref('')

//输入框的placeholder
const inputPlaceholder = ref('请输入待办事项')

//添加待办事项
const addTodo = () => {
    if(newTodo.value.trim() !== '') {
        todos.value.push({text: newTodo.value, completed: false})
        newTodo.value = ''
    }
}

//删除待办事项
const removeTode = (index) => {
    todos.value.splice(index, 1)
}

//切换待办事项的完成状态
const toggleComplete = (index) => {
    todos.value[index].completed = !todos.value[index].completed
}
</script>